<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/cropper.min.css">
		  <style>
		    .container {
		      max-width: 640px;
		      height: 100%;
		      margin: 90px 0 0 0;
		    }
			body{
				width: 100%;
				height: 100%;
				background: #fff;
			}
		    img {
		      width: 100%;
		      /*height:100%;*/
		      max-height:100%;
		    }
		    .mui-bar-nav span{
		    	font-size: 17px!important;
		    	font-weight: bold;
		    	color:#39f;
		    	padding:12px 0px 11px 0px;
		    }
		    .mui-bar-nav h1{
		    	color:#333;
		    	font-weight: 600;
		    }
		    .cropper-point{
		    	/*background: none!important;*/
		    	border-radius:4px;
		    }
		    .cropper-point,.cropper-point.point-se{
		    	width:8px;
		    	height: 8px;
		    }
		    .cropper-point.point-se:before{
/*		    	content: none!important;*/ 
		    }
		    .cropper-point.point-n,.cropper-point.point-nw,.cropper-point.point-ne{
		    	top:-4px;
		    }
		    .cropper-point.point-nw,.cropper-point.point-w,.cropper-point.point-w{
		    	left:-4px;
		    }
		    .cropper-point.point-sw,.cropper-point.point-s,.cropper-point.point-se{
		    	bottom: -4px;
		    }
		    .cropper-point.point-e,.cropper-point.point-se,.cropper-point.point-ne{
		    	right:-4px;
		    }
		    .cropper-line{
		    	display: none;
		    }
		  </style> 
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<span class="mui-pull-left mui-pull-cancel">取消</span>
		    <h1 class="mui-title">修剪图片</h1>
		    <span class="mui-pull-right mui-cropper-submit">保存</span>
		</header>
		<div class="container">
      <img id="image" src="../images/default_avatar.png" alt="Picture">
  </div>
  <script src="../js/cropper.min.js"></script>
  
		<script src="../js/mui.min.js"></script>
		<script src="../js/castapp.js"></script>
		<script src="../js/myapp.js"></script>
  <script>
  	ca.init();
    //localStorage.setItem('cropper_path','../images/shuijiao.jpg');
  	var cropper_path = localStorage.getItem('cropper_path');
	ca.id('image').src = cropper_path ? cropper_path : '../images/default_avatar.png';
	
    window.addEventListener('DOMContentLoaded', function () {
		var image = document.querySelector('#image');
		var cropper = new Cropper(image, {
			viewMode: 4,// 显示模式
	        dragMode :'none',// 拖动模式
			checkImageOrigin: true,
	        aspectRatio: 1 / 1,
	        autoCropArea: 1,//裁剪框区域大小 
	//      zoom: -0.2,
	//		cropBoxResizable :false,//禁止放大缩小裁剪框
			//cropBoxMovable :false,//是否允许拖动裁剪框
			zoomable:false,//禁止图片放大缩小
			guides:false,//是否显示裁剪虚线
			center:false,//显示才健康中间的+号 
	//		restore:false,
			//zoomOnTouch:true 
        });
      //保存上传图片
    	ca.className('mui-cropper-submit')[0].addEventListener('tap',function(){
			//获取图片裁剪参数
			var json = cropper.getData();
			var access_token = localStorage.getItem('access_token');
			var url = request_url+'/api/oauth/upload_avatar?access_token='+access_token + '&user_access_token='+get_user_access_token()+'&w='+json.width+'&h='+json.height+'&x='+json.x+'&y='+json.y;
			//文件上传
			ca.uploadFiles(url,cropper_path,function(data){
				var json = JSON.parse(data);
				console.log(url);
				console.log(data);
			    localStorage.setItem('user_avatar',json.save_url);
			    //通知的页面id  
			    var noticeArr = ['info','pages/home.html'];
			    //发送通知
				ca.sendNotice(noticeArr,'userInfo',{json:json});
				//关闭当前页面
			    ca.closeCurrentInterface();
			});
		});
		//取消
		ca.className('mui-pull-cancel')[0].addEventListener('tap',function(){
			ca.closeCurrentInterface();
		});
    });
	
    
  </script>
	</body>

</html>